<!--
 * @Description  : 基础Header
 * @Autor        : 杜康
 * @Date         : 2023-03-03 15:36:51 +0800
 * @LastEditors  : 杜康
 * @LastEditTime : 2023-03-17 18:38:41 +0800
-->
<template>
  <header :class="!isCollapse ? 'header' : 'header-fold'">
    <div class="logo" @click="handleJumpHome">
      <el-icon :size="32">
        <ElementPlus />
      </el-icon>
      <span v-if="!isCollapse" class="logo-text" v-text="AppName"></span>
    </div>
    <div class="right">
      <div class="right-breadcrumb">
        <el-icon @click="handleCollapse" :size="24">
          <Expand v-if="isCollapse" />
          <Fold v-else />
        </el-icon>
      </div>
      <div class="right-userinfo">
        <el-dropdown @command="handleCommand">
          <span class="el-dropdown-link">
            Admin
            <el-icon class="el-icon--right">
              <ArrowDown />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="UserCenter">个人中心</el-dropdown-item>
              <el-dropdown-item command="LogOut">退出</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </header>
</template>

<script setup>
import { ref, inject } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { AppName } from "@/assets/common/index";

// 伸缩状态
let isCollapse = inject("isCollapse");
// 伸缩事件
const handleCollapse = () => {
  isCollapse.value = !isCollapse.value;
};
const router = useRouter();
const route = useRoute();
/**
 * @description: 点击Logon
 * @return {*}
 * @author: 杜康
 * @Date: 2023-03-07 17:50:15 +0800
 */
const handleJumpHome = () => {
  router.push({
    path: "/dashboard"
  });
};

const handleCommand = (command) => {
  console.log("[ command ] >", command);
  if (command === "LogOut") {
    handleLogout();
  }
};
// 退出登录
const handleLogout = () => {
  ElMessageBox.confirm(`确定要退出当前账号【Admin】吗？`, "提示", {
    confirmButtonText: "退出",
    cancelButtonText: "取消",
    autofocus: false,
    closeOnClickModal: false,
    type: "warning"
  })
    .then(() => {
      router.push({
        path: "/login"
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "您点击了取消操作"
      });
    });
};
</script>

<style lang="scss" scoped>
@mixin headerMixin($menuWidth) {
  position: relative;
  height: $header-height;
  line-height: $header-height;
  width: 100%;
  display: flex;
  box-shadow: 0 2px 2px 0 $border-color;
  background-color: $white;
  .logo {
    position: relative;
    flex: 0 0 $menuWidth;
    width: $menuWidth;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: $header-background;
    color: $white;
    cursor: pointer;
    &-text {
      position: relative;
      font-weight: bold;
      font-size: 20px;
      margin-left: 5px;
    }
  }
  .right {
    position: relative;
    width: calc(100% - #{$menuWidth});
    padding: 0 15px;
    display: flex;
    box-sizing: border-box;
    box-shadow: 0 -1px 0 0 $border-color inset;
    flex-shrink: 0;
    &-breadcrumb,
    &-userinfo {
      position: relative;
      flex: 1;
      display: flex;
      align-items: center;
    }
    &-breadcrumb {
      cursor: pointer;
    }
    &-userinfo {
      justify-content: flex-end;
    }
  }
}

.header {
  @include headerMixin($menu-width);
}

.header-fold {
  @include headerMixin($menu-width-fold);
}
</style>
